<template>
	<view style="padding-bottom: 130rpx;">
		<view class="formContainer">
			<uni-forms ref="form">
				<uni-forms-item label="加油车辆" required>
					<view>
						<u--input v-model="formData.carNo" placeholder="请选择车辆" disabled disabledColor="#fff"></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="加油人" required>
					<view><u--input v-model="formData.oiler" placeholder="请输入加油人"></u--input></view>
				</uni-forms-item>

				<uni-forms-item label="加油时间" required>
					<view @click="showDateTime=!showDateTime">
						<u--input v-model="formData.refuelingDate" placeholder="请选择加油时间" disabled disabledColor="#fff"
							suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="是否使用油卡" required>
					<uni-data-checkbox v-model="formData.isUseCard" :localdata="useCards" />
				</uni-forms-item>
				<uni-forms-item label="使用加油卡" v-if="formData.isUseCard==1" required>
					<view @click="showCard=!showCard">
						<u--input v-model="formData.cardNo" placeholder="请选择油卡" disabled disabledColor="#fff"
							suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>
				<uni-forms-item label="加油金额" required>
					<view><u--input v-model.number="formData.refuelingAmount" placeholder="请输入加油金额"></u--input></view>
				</uni-forms-item>
				<uni-forms-item label="加油前公里数" required>
					<view><u--input v-model.number="formData.kilometers" placeholder="请输入加油前公里数"></u--input></view>
				</uni-forms-item>
				<uni-forms-item label="加油前油量" required>
					<view><u--input v-model.number="formData.oilVolume" placeholder="请输入加油前油量"></u--input></view>
				</uni-forms-item>
				<uni-forms-item label="备注" labelPosition="top" required="">
					<view>
						<u--textarea v-model="formData.remark" placeholder="请输入200字以内的内容" count
							maxlength="200"></u--textarea>
					</view>
				</uni-forms-item>

				<uni-forms-item label="加油前油表照片" labelPosition="top" labelWidth="300">
					<sr-upload ref="upload1" maxCount="1" @uploadResult="upload1"></sr-upload>
				</uni-forms-item>
				<uni-forms-item label="加油后油表照片" labelPosition="top" labelWidth="300">
					<sr-upload ref="upload2" maxCount="1" @uploadResult="upload2"></sr-upload>
				</uni-forms-item>
				<uni-forms-item label="加油小票" labelPosition="top" labelWidth="300">
					<sr-upload ref="upload3" maxCount="1" @uploadResult="upload3"></sr-upload>
				</uni-forms-item>
			</uni-forms>
		</view>

		<button type="info" class="sub-btn" @click="confimAdd">确认</button>

		<!-- 加油日期 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showDateTime"
			@close="showDateTime = false" @cancel="showDateTime = false" :formatter="formatter" mode="datetime"
			title="加油时间" confirmColor="#1573FF" @confirm="confimDate"></u-datetime-picker>
		<u-picker :show="showCard" :columns="cardList" keyName="cardNo" closeOnClickOverlay @close="showCard=false"
			@cancel="showCard=false" title="选择油卡" confirmColor="#1573FF" @confirm="confimCard">
		</u-picker>
	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import * as refuelApi from '@/api/refuel-api.js';
	import settings from '@/settings.js';
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				type: 0,
				currentDate: moment(),
				showDateTime: false,
				showCard: false,
				cardList: [],
				useCards: [{
						'text': '是',
						'value': 1
					},
					{
						'text': '否',
						'value': 0
					}
				
				],
				formData: {
					id: '',
					carId: '',
					carNo: '',
					kilometers: '',
					oiler: this.$store.state.user.userInfo.name,
					refuelingAmount: '',
					oilCardId: '',
					cardNo: '',
					refuelingDate: '',
					remark: '',
					photoOfBefore: '',
					photoOfAfter: '',
					refuelingTicket: '',
					oilVolume: '',
					isUseCard:1,
				}
			};
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		onLoad(op) {
			if (op) {
				this.type = op.type;

				uni.setNavigationBarTitle({
					title: this.type == 1 ? '编辑加油记录' : '新增加油记录'
				});

				if (this.type == 1) {
					this.formData.id = op.id;
					this.getRefuelDetail();
				} else {
					this.formData.carId = op.carId;
					this.formData.carNo = op.carNo;
				}

			}


			this.getRefuelCardList();
		},
		methods: {
			// 加油详情
			getRefuelDetail() {
				let params = {
					id: this.formData.id
				}
				refuelApi.refuelDetail(this.formData.id).then(res => {
					this.formData = res.data;
					if(!this.$u.test.isEmpty(this.formData.cardNo)) {
						this.$set(this.formData, 'isUseCard', 1)
					}else {
						this.$set(this.formData, 'isUseCard', 0)
					}
					
					if (!this.$u.test.isEmpty(this.formData.photoOfBefore)) {
						let url = settings.baseImageUrl + this.formData.photoOfBefore;
						this.$refs.upload1.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.photoOfBefore
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.photoOfAfter)) {
						let url = settings.baseImageUrl + this.formData.photoOfAfter;
						this.$refs.upload2.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.photoOfAfter
						}]
					}
					if (!this.$u.test.isEmpty(this.formData.refuelingTicket)) {
						let url = settings.baseImageUrl + this.formData.refuelingTicket;
						this.$refs.upload3.fileList = [{
							message: '',
							status: 'success',
							thumb: url,
							type: 'image',
							url: this.formData.refuelingTicket
						}]
					}
				})
			},
			// 获取加油卡列表
			getRefuelCardList() {
				let params = {
					isAvailable: 1
				}
				refuelApi.refuelCardList(this.toParams(params)).then(res => {
					this.cardList = [res.data];
				})
			},
			// 确定加油日期
			confimDate(e) {
				this.formData.refuelingDate = moment(e.value).format('YYYY-MM-DD HH:mm');
				this.showDateTime = false;
			},
			// 选择加油卡
			confimCard(e) {
				this.formData.oilCardId = e.value[0].oilCardId;
				this.formData.cardNo = e.value[0].cardNo;
				this.showCard = false;
			},
			// 上传加油前照片
			upload1(data) {
				this.formData.photoOfBefore = data[0] || '';
			},
			// 上传加油后照片
			upload2(data) {
				this.formData.photoOfAfter = data[0] || '';
			},
			// 上传加油小票
			upload3(data) {
				this.formData.refuelingTicket = data[0] || '';
			},

			confimAdd() {
				if (uni.$u.test.isEmpty(this.formData.carId)) {
					uni.$u.toast('请选择车辆');
					return
				} else if (uni.$u.test.isEmpty(this.formData.oiler)) {
					uni.$u.toast('请输入加油人');
					return
				} else if (uni.$u.test.isEmpty(this.formData.refuelingDate)) {
					uni.$u.toast('请选择加油时间');
					return
				}else if (this.formData.isUseCard==1 && uni.$u.test.isEmpty(this.formData.cardNo)) {
					uni.$u.toast('请选择加油卡');
					return
				} else if (uni.$u.test.isEmpty(this.formData.refuelingAmount)) {
					uni.$u.toast('请输入加油金额');
					return
				} else if (uni.$u.test.isEmpty(this.formData.kilometers)) {
					uni.$u.toast('请输入加油前公里数');
					return
				} else if (uni.$u.test.isEmpty(this.formData.oilVolume)) {
					uni.$u.toast('请输入加油前油量');
					return
				} else if (uni.$u.test.isEmpty(this.formData.remark)) {
					uni.$u.toast('请输入备注');
					return
				} else {

					if (this.type == 1) { //编辑
						refuelApi.editRefuelRecord(this.formData).then(res => {
							uni.$emit("refreshCarRefuelList");
							this.$u.toast('修改成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					} else { //新增
						refuelApi.addRefuelRecord(this.formData).then(res => {
							uni.$emit("refreshCarRefuelList");
							this.$u.toast('新增成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					}


				}
			},


			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>